
<template>
  <div>
    <el-form :model="form" ref="form" :inline="true" size="large">
      <el-checkbox
        style="margin: 15px 0"
        true-label="0"
        false-label="1"
        v-model="form.status"
      >
        启用
      </el-checkbox>
      <el-row :inline="true">
        <el-form-item label="方案编码" prop="strategyCode">
          <el-input
            :disabled="true"
            v-model="form.strategyCode"
            placeholder="请输入方案编码"
          />
        </el-form-item>
        <el-form-item label="方案名称" prop="strategyName">
          <el-input v-model="form.strategyName" placeholder="请输入方案名称" />
        </el-form-item>
        <el-form-item label="优先级" prop="priorityLevel">
          <!-- <el-input v-model="form.priorityLevel" placeholder="请输入优先级" /> -->
          <el-select
            v-model="form.priorityLevel"
            placeholder="优先级"
            clearable
          >
            <el-option
              v-for="(dict, i) in 10"
              :key="i"
              :label="dict"
              :value="dict"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row :inline="true">
        <el-form-item label="配货类型" prop="allocationType">
          <el-select
            v-model="form.allocationType"
            placeholder="配货类型"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_allocationtype"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="配货来源" prop="allocationSource">
          <!-- <el-input
            v-model="form.allocationSource"
            placeholder="请输入配货来源"
          /> -->
          <el-select
            v-model="form.allocationSource"
            placeholder="请输入配货来源"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_allocationsource"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="品牌" prop="brand">
          <!-- <el-input v-model="form.brand" placeholder="请输入品牌" /> -->
          <el-select
            v-model="form.brand"
            placeholder="请输入品牌"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in brandList"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row :inline="true">
        <el-form-item label="生效开始日期" prop="effectiveStartDate">
          <el-date-picker
            clearable
            v-model="form.effectiveStartDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择生效开始日期"
            :picker-options="setDateRange"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="生效结束日期" prop="effectiveEndDate">
          <el-date-picker
            clearable
            v-model="form.effectiveEndDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择生效结束日期"
          >
          </el-date-picker>
          <el-checkbox
            true-label="0"
            false-label="1"
            v-model="form.longTermValid"
          >
            长期有效
          </el-checkbox>
        </el-form-item>
        <el-form-item label="规则权限:" prop="effectiveEndDate">
          <el-checkbox
            true-label="0"
            false-label="1"
            v-model="form.allowModification"
          >
            规则条件只允许创建人本人或者管理员修改
          </el-checkbox>
        </el-form-item>
      </el-row>
      <el-row :inline="true">
        <el-form-item label="配货方式" prop="allocationMethod">
          <el-select
            v-model="form.allocationMethod"
            placeholder="配货方式"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_allocation_method"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="订单范围"
          prop="orderId"
          v-if="form.allocationMethod == 'ORDER'"
        >
          <el-select
            v-model="form.orderId"
            placeholder="订单范围"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_order"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-button
            size="mini"
            type="primary"
            @click="changeOrder(5)"
            v-if="form.orderId == 'SPECIAL'"
            >选择订单</el-button
          >
        </el-form-item>
        <el-form-item
          label="商品范围"
          prop="productCode"
          v-if="form.allocationMethod == 'SKU'"
        >
          <el-select
            v-model="form.productCode"
            placeholder="商品范围"
            clearable
            style="width: 240px"
          >
            <el-option
              v-for="dict in dict.type.sys_product_range"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
          <el-button
            size="mini"
            type="primary"
            @click="changeOrder(10)"
            v-if="form.productCode == 'SKU'"
            >选择商品</el-button
          >
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-row>
      <el-form-item style="width: 100%; text-align: center">
        <!-- <el-button @click="submitnote('noticForm')" type="primary"
        >笔记合作</el-button
      > -->
        <!-- <el-button style="margin-top: 12px" @click="prev">上一步</el-button> -->
        <el-button style="margin-top: 12px" @click="next">下一步</el-button>
        <el-button style="margin-top: 12px" @click="submitForm"
          >保存草稿</el-button
        >
        <!-- <el-button @click="resetForm" style="margin-left: 10px"
        >一键清空</el-button
      > -->
      </el-form-item>
    </el-form>
    <el-dialog
      :visible.sync="openTrigger"
      width="1500px"
      append-to-body
      v-if="openTrigger"
    >
      <div class="el-dialog-div">
        <component
          :is="currentComponent"
          :row="row"
          @returnTrigger="openTrigger = false"
        ></component>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import trigger from "@/views/productAllocation/triggerStrategy/index.vue";
import retiolan from "@/views/productAllocation/retiolan/index.vue";
import {
  listStrategy,
  getStrategy,
  delStrategy,
  addStrategy,
  updateStrategy,
} from "@/api/productAllocation/strategy";
export default {
  components: {
    trigger,
    retiolan,
  },
  dicts: [
    "sys_product_allocationtype",
    "sys_product_pp",
    "sys_product_allocationsource",
    "sys_product_allocation_method",
    "sys_product_order",
    "sys_product_range",
  ],
  props: {
    row: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      setDateRange: {
        disabledDate: (time) => {
          // 禁用今天之后的日期【当前天可选】
          return time.getTime() > Date.now() + 86400000 - 5;
        },
      },
      openTrigger: false,
      panelType: 5,
      // 表单参数 /VFU/VH/VFUS
      form: {},
      brandList: [
        { value: "ALL", label: "全部品牌" },
        { value: "VFU", label: "VFU" },

        { value: "VoooHooo", label: "Vooohooo品牌" },
        { value: "VFUS", label: "VFUS" },
      ],
    };
  },
  watch: {
    row: {
      handler: function (newnew, oldold) {
        console.log("newnew", newnew);
        if (newnew) {
          this.form = newnew;
          // this.form.id=newnew
        }
      },
      deep: true,
      immediate: true,
    },
  },
  computed: {
    // ...mapGetters(["userId"]),
    currentComponent() {
      let type = parseInt(this.panelType);
      switch (type) {
        case 5:
          return "trigger";
        case 10:
          return "retiolan";
      }
    },
  },
  methods: {
    changeOrder(panelType) {
      this.panelType = panelType;
      this.openTrigger = true;
    },
    next() {
      this.updateForm();
      this.$emit("next");
    },
    /** 提交按钮 */
    updateForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              // this.$modal.msgSuccess("修改成功");
              //   this.open = false;
              //   this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              //   this.open = false;
              //   this.getList();
            });
          }
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              //   this.open = false;
              //   this.getList();
            });
          } else {
            addStrategy(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              //   this.open = false;
              //   this.getList();
            });
          }
        }
      });
    },
  },
};
</script>